<!-- 张梦莉  2017-12-19 订单设置 -->

<template>
    <section>
        <el-row class="mt-10">
            <el-col :span="24" >
                <el-form label-position="left" :model="Form" label-width="120px" :rules="FormRules" ref="Form">
                    <div class="content-head">
                        待付款订单取消时间限制
                    </div>
                    <el-form-item class="pl-5" label="正常订单" prop="minute">
                        <el-input style="width:120px;" v-model="Form.day" class="pr-2"></el-input>天
                        <el-input style="width:120px;" v-model="Form.minute" class="px-2"></el-input>分 之内未付款，订单自动关闭
                    </el-form-item>
                    <div class="content-head">
                        发货自动收货限制
                    </div>
                    <el-form-item class="pl-5" label="订单完成超过" prop="Order_AUTO_COMPLETE_LIMIT">
                        <el-input class="w-25 pr-2" v-model="Form.Order_AUTO_COMPLETE_LIMIT"></el-input>天 订单自动确认收货
                    </el-form-item>
                    <div class="content-head">
                        可申请退款退货限制
                    </div>
                    <el-form-item class="pl-5" label="订单收货在" prop="Order_RETURN_LIMIT">
                        <el-input  class="w-25 pr-2" v-model="Form.Order_RETURN_LIMIT"></el-input>天 可申请退款退货
                    </el-form-item>
                    <div class="content-head">
                        默认退货地址
                    </div>
                    <el-form-item class="pl-5" label="请选择地址" prop="area_id">
                      <el-select v-model="Form.area_id" placeholder="省" @change="getCityList" style="width:120px;">
                        <el-option
                          v-for="item in areasList"
                          :key="item.area_pid"
                          :label="item.area_name"
                          :value="item.area_id"
                        >
                        </el-option>
                      </el-select>

                      <el-select v-model="Form.city_id" placeholder="市" @change="getXianList" style="width:120px;">
                        <el-option
                          v-for="item in cityList"
                          :key="item.area_pid"
                          :label="item.area_name"
                          :value="item.area_id">
                        </el-option>
                      </el-select>
                      <el-select v-model="Form.xian_id" placeholder="区/县"  style="width:120px;">
                        <el-option
                          v-for="item in xianList"
                          :key="item.area_pid"
                          :label="item.area_name"
                          :value="item.area_id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="pl-5 mt-3" label="详细地址" prop="address">
                        <el-input type="textarea" style="width:370px;" v-model="Form.address" placeholder="例如：望城路118号"></el-input>
                    </el-form-item>
                </el-form>
                <div style="float: right;" class="p-5">
                    <el-button type="primary" @click.native="editOrderSetting">保存</el-button>
                </div>
            </el-col>
        </el-row>
        <div style="height: 500px"></div>
    </section>
</template>
<script>
    import {getAreas, getSettings, editSettings} from '../../api/api'
    export default {
      data () {
        return {
          Form: {
            area_id: null,
            city_id: null,
            xian_id: null,
            address: '',
            day: '',
            minute: '',
            Order_AUTO_COMPLETE_LIMIT: '',
            Order_CLOSE_LIMIT: '',
            Order_RETURN_ADDRESS: [],
            Order_RETURN_LIMIT: ''
          },
          orderSetList: [
            {
              key: 'Order_AUTO_COMPLETE_LIMIT',
              value: '',
              title: '订单自动确认收货的期限(天)',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'Order_CLOSE_LIMIT',
              value: '',
              title: '取消未付款订单的时限',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'Order_RETURN_ADDRESS',
              value: '',
              title: '默认退货地址',
              updated_at: '2017-12-20 03:06:00'
            },
            {
              key: 'Order_RETURN_LIMIT',
              value: '',
              title: '可申请退货退款期限(天)',
              updated_at: '2017-12-20 03:06:00'
            }
          ],
          areasSelected: [],
          areasList: [], // 省
          cityList: [], // 市
          xianList: [], // 区县集合
          FormRules: {
            Order_AUTO_COMPLETE_LIMIT: [
              {required: true, message: '请输入订单自动确认收货的期限', trigger: 'blur'},
            ],
            minute: [
              {required: true, message: '请输入取消未付款订单的时限', trigger: 'blur'}
            ],
            Order_RETURN_LIMIT: [
              {required: true, message: '请输入可申请退货退款期限', trigger: 'blur'}
            ],
            area_id: [
              {required: true, message: '请输入默认地址', trigger: 'blur'}
            ]
          },
        }
      },
      methods: {
        getOrderSetting () {
          let para = {}
          para.prefix = 'order'
          getSettings(para).then(res => {
            this.orderSetList = res.data
            for (let i = 0; i < this.orderSetList.length; i++) {
              if (this.orderSetList[i].key === 'Order_CLOSE_LIMIT') {
                this.Form.Order_CLOSE_LIMIT = JSON.parse(this.orderSetList[i].value)
                this.Form.day = JSON.parse(this.orderSetList[i].value)[0]
                this.Form.minute = JSON.parse(this.orderSetList[i].value)[1]
              }
              if (this.orderSetList[i].key === 'Order_RETURN_LIMIT') {
                this.Form.Order_RETURN_LIMIT = this.orderSetList[i].value
              }
              if (this.orderSetList[i].key === 'Order_RETURN_ADDRESS') {
                this.Form.Order_RETURN_ADDRESS = JSON.parse(this.orderSetList[i].value)
                this.Form.area_id = JSON.parse(this.orderSetList[i].value)[0]
                this.Form.city_id = JSON.parse(this.orderSetList[i].value)[1]
                this.Form.xian_id = JSON.parse(this.orderSetList[i].value)[2]
                this.Form.address = JSON.parse(this.orderSetList[i].value)[3]
                  let para = {}
                  para.area_pid = this.Form.area_id
                  getAreas(para).then(res => {
                      this.cityList = res.data
                  })
                this.getXianList(this.Form.city_id)
              }
              if (this.orderSetList[i].key === 'Order_AUTO_COMPLETE_LIMIT') {
                this.Form.Order_AUTO_COMPLETE_LIMIT = this.orderSetList[i].value
              }
            }
          })
        },
        editOrderSetting () {
          this.$refs.Form.validate((valid) => {
              if (valid) {
                let time = []
                time.push(this.Form.day)
                time.push(this.Form.minute)
                this.Form.Order_CLOSE_LIMIT = JSON.stringify(time)
                this.orderSetList[0].value = this.Form.Order_AUTO_COMPLETE_LIMIT
                this.orderSetList[1].value = this.Form.Order_CLOSE_LIMIT
                this.Form.Order_RETURN_ADDRESS = []
                this.Form.Order_RETURN_ADDRESS.push(this.Form.area_id)
                this.Form.Order_RETURN_ADDRESS.push(this.Form.city_id)
                this.Form.Order_RETURN_ADDRESS.push(this.Form.xian_id)
                this.Form.Order_RETURN_ADDRESS.push(this.Form.address)
                this.orderSetList[2].value = JSON.stringify(this.Form.Order_RETURN_ADDRESS)
                this.orderSetList[3].value = this.Form.Order_RETURN_LIMIT
                editSettings(this.orderSetList).then(res => {
                  if (parseInt(res.status) === 1) {
                    this.$message({
                      message: '保存成功',
                      type: 'success'
                    })
                    this.$refs['Form'].resetFields();
                  } else {
                    this.$alert('保存失败', '失败', {type: 'error'})
                  }
                  getAreas().then(res => {
                    this.areasList = res.data
                  })
                  this.getOrderSetting()
                })
              }
              })
        },
        getCityList (value) {
          let para = {}
          para.area_pid = value
          this.Form.city_id = null
          this.Form.xian_id = null
          getAreas(para).then(res => {
            this.cityList = res.data
          })
        },
        getXianList (value) {
          let para = {}
          para.area_pid = value
          this.xianList = []
          getAreas(para).then(res => {
            this.xianList = res.data
          })
        }
      },
      computed: {
      },
      mounted () {
        getAreas().then(res => {
          this.areasList = res.data

        })
        this.getOrderSetting()
      }
    }
</script>
<style scoped rel="stylesheet/sass" lang="sass">
    .el-row
        padding: 0 20px 10px 20px
    .content-head
        margin: 20px 0
        padding-bottom: 5px
        font-size: 18px
        border-bottom: 1px solid #DFE4ED
    .sale-statistic
        width: 100%
        thead
            tr
                background-color: #f4f5fa
                th
                    height: 50px
        td
            text-align: center
            height: 50px
    .el-form-item
        margin-bottom: 0px !important
    .image-list
        img
            left: 0
            width: 100px
            height: 100px
            background-color: #fbfdff
            border-radius: 6px
            margin-left: 5px
            float: left
            margin-top: 5px
    .options
        span:nth-child(n+2)
            margin-left: 20px
    .category-content
        display: inline-block
        span
            background-color: #f5f5f5
            display: inline-block
            padding: 0 5px
        span:nth-child(n+2)
            margin-left: 10px
</style>
